@media (max-width : 600px) {
    .blank{
        visibility: hidden;
        translate: 0 0;
    }
    .sign-section{
        flex-direction: column;
        overflow: hidden;
        width: 100%;
        height: 80%;
    }
    .sign-section div{
        width: 70%;
        height: 90%;
        border-radius: 30px;
    }
    .sign-up{
        position: absolute;
        translate: 0 110%;
        z-index: 1;
    }
    .sign-up label:nth-of-type(2){
        position: absolute;
        translate: 65% -740%;
    }
    .sign-up input:nth-of-type(2){
        width: 33%;
        position: absolute;
        translate: 56% -375%;
    }
}
@media (min-width: 480px) and (max-width: 834px){
    .blank{
        visibility: hidden;
        translate: 0 0;
    }
    .sign-section{
        flex-direction: column;
        overflow: hidden;
        width: 100%;
        height: 80%;
    }
    .sign-section div{
        width: 70%;
        height: 90%;
        border-radius: 30px;
    }
    .sign-up{
        position: absolute;
        translate: 0 110%;
        z-index: 1;
    }
    .sign-up label:nth-of-type(2){
        position: absolute;
        translate: 65% -740%;
    }
    .sign-up input:nth-of-type(2){
        width: 33%;
        position: absolute;
        translate: 56% -375%;
    }
    .sign-in h1 , .sign-up h1{
        font-size: 5vw;
    }
    .sign-in label , .sign-up label{
        font-size: 30px;
    }
    .sign-in input ,.sign-up input{
        height: 5%;
        font-size: 25px;
    }
    .sign-in button , .sign-up button{
        font-size: 3vw;
    }
    .sign-in p , .sign-up p{
        font-size: 3vw;
        margin-top: 3%;
    }
    .sign-in svg{
        transform: scale(1.5);
        translate: -150% 5%;
    }
    .sign-up label:nth-of-type(2){
        translate: 80% -760%;
    }
    .sign-up input:nth-of-type(2) {
        translate: 60% -360%;
    }
    .sign-up button:nth-of-type(1){
        margin-top: 5%;
    }
}